<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { message } from "@/utils/message";
import Earth from "../chart/3D/earth.vue";
import AssetLine from "./assetlint.vue";
import AssetTable from "./assettable.vue";
import Information from "./information.vue";
import Funnel from "./funnel.vue";
import WordCloud from "./wordcloud.vue";
defineOptions({
  name: ""
});

const createTooltip = function () {
  return {
    trigger: "axis",
    extraCssText:
      "background-color: #fff; color: #333;box-shadow: 0 2px 6px 0 rgba(0,0,0,0.10);padding:10px;",
    axisPointer: {
      label: {
        padding: [20, 20, 50, 20]
      },
      lineStyle: {
        type: "dotted",
        color: "#999"
      }
    }
  };
};

onMounted(() => {
  message("该账号未开通此功能，仅做展示使用!");
});

// this.options = {
//   tooltip: n,
//   legend: {
//     type: "scroll",
//     right: 0,
//     top: "10",
//     orient: "vertical",
//     icon: "rect",
//     data: a,
//     itemGap: 10,
//     itemWidth: 10,
//     itemHeight: 10,
//     textStyle: {
//       color: this.config.legendColor || "#000"
//     }
//   },
//   calculable: !0,
//   series: [
//     {
//       name: e,
//       type: "funnel",
//       left: "5%",
//       top: "5%",
//       bottom: "5%",
//       width: "80%",
//       height: "90%",
//       min: 0,
//       max: 100,
//       minSize: "20%",
//       maxSize: "90%",
//       sort: "descending",
//       gap: 0,
//       label: {
//         show: !0,
//         position: "inside",
//         formatter: "{d}%"
//       },
//       labelLine: {
//         length: 10,
//         lineStyle: {
//           width: 1,
//           type: "solid"
//         }
//       },
//       itemStyle: {
//         borderColor: "#fff",
//         borderWidth: 1
//       },
//       emphasis: {
//         label: {
//           fontSize: 20
//         }
//       },
//       data: t
//     }
//   ]
// };
</script>

<template>
  <div class="screen-box">
    <div class="screen-title">脆弱性态势展示</div>

    <div class="card-list">
      <div class="self-card">
        <div class="desc">IP资产</div>
        <div class="count">298</div>
      </div>
      <div class="self-card">
        <div class="desc">域名资产</div>
        <div class="count">508</div>
      </div>
      <div class="self-card">
        <div class="desc">端口服务</div>
        <div class="count">1682</div>
      </div>
      <div class="self-card">
        <div class="desc">PoC漏洞</div>
        <div class="count">158</div>
      </div>
      <div class="self-card">
        <div class="desc">版本型漏洞</div>
        <div class="count">0</div>
      </div>
      <div class="self-card">
        <div class="desc">疑似仓库</div>
        <div class="count">438</div>
      </div>
      <div class="self-card">
        <div class="desc">暗网情报</div>
        <div class="count">91632</div>
      </div>
    </div>
    <div class="main-data-box">
      <div class="left-data-box">
        <div>
          <AssetLine height="100%" />
        </div>
        <div style="background-color: rgba(22, 176, 227, 0.1)">
          <h3 class="data-header">漏洞数量变化</h3>
          <!-- 生成一个table,包含4行6列 -->
          <div class="table-box">
            <table
              class="vulnerability-table"
              border="1"
              width="100%"
              height="100%"
            >
              <thead>
                <tr>
                  <th />
                  <th>严重</th>
                  <th>高危</th>
                  <th>中危</th>
                  <th>低危</th>
                  <th>全部</th>
                </tr>
              </thead>
              <tr>
                <td>新增</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
              </tr>
              <tr>
                <td>遗留</td>
                <td>8</td>
                <td>9</td>
                <td>10</td>
                <td>11</td>
                <td>12</td>
              </tr>
              <tr>
                <td>减少</td>
                <td>14</td>
                <td>15</td>
                <td>16</td>
                <td>17</td>
                <td>18</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
      <div class="earth-contanier">
        <Earth />
      </div>
      <div class="right-data-box">
        <div><Funnel height="95%" /></div>
        <div><WordCloud height="100%" /></div>
      </div>
    </div>

    <div class="bottom-box">
      <AssetTable />
      <Information />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.screen-box {
  // position: fixed;
  // top: 0;
  // left: 0;
  // bottom: 0;
  // right: 0;
  min-height: 100%;
  background: url("@/assets/screen/bgdd.png");
  background-size: 100% 100%;
  // background-size: 100%;
  margin: 0 !important;
  padding: 0 20px 30px;

  .screen-title {
    padding-top: 40px;
    text-align: center;
    font-size: 26px;
    color: white;
  }
}

.card-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 75px;
  margin: 10px 0;
  .self-card {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-right: 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    border-left: 1px solid #506e7b;
    border-right: 1px solid #506e7b;
    background-image: -webkit-gradient(
      linear,
      right top,
      left top,
      from(rgba(107, 227, 250, 0.07)),
      color-stop(19%, rgba(107, 227, 250, 0.06)),
      color-stop(52%, rgba(107, 227, 250, 0.04)),
      color-stop(82%, rgba(107, 227, 250, 0.05)),
      to(rgba(107, 227, 250, 0.07))
    );
    background-image: linear-gradient(
      -90deg,
      rgba(107, 227, 250, 0.07),
      rgba(107, 227, 250, 0.06) 19%,
      rgba(107, 227, 250, 0.04) 52%,
      rgba(107, 227, 250, 0.05) 82%,
      rgba(107, 227, 250, 0.07)
    );
    -webkit-box-shadow: inset -1px 0 0 0 #506e7b, inset 1px 0 0 0 #506e7b;
    box-shadow: inset -1px 0 0 0 #506e7b, inset 1px 0 0 0 #506e7b;
    .desc {
      font-family: PingFangSC-Regular;
      font-size: 14px;
      font-weight: 600;
      color: #37b9e6;
      letter-spacing: 0;
      line-height: 14px;
    }

    .count {
      font-family: PingFangSC-Regular;
      font-size: 28px;
      color: #fff;
      letter-spacing: 0;
      text-align: right;
      line-height: 28px;
      margin-top: 10px;
      cursor: pointer;
    }
  }

  .flip-list-move[data-v-7ac5b196] {
    -webkit-transition: -webkit-transform 0.5s;
    transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    transition: transform 0.5s, -webkit-transform 0.5s;
  }
}

.main-data-box {
  display: flex;
  > div {
    flex: 1;
  }
  .left-data-box,
  .right-data-box {
    > div {
      height: calc(50% - 40px);
      margin: 20px 10px;
      padding: 10px;
      background-color: rgba(22, 176, 227, 0.1);
      position: relative;
      &::before {
        content: "";
        display: block;
        width: 5px;
        height: calc(100% + 10px);
        position: absolute;
        top: -5px;
        left: -5px;
        border: 1px solid #506e7b;
        border-right: none;
      }
      &::after {
        content: "";
        display: block;
        width: 5px;
        height: calc(100% + 10px);
        position: absolute;
        top: -5px;
        right: -5px;
        border: 1px solid #506e7b;
        border-left: none;
      }
    }
  }

  .data-header {
    font-size: 15px;
    line-height: 15px;
    font-weight: normal;
    color: #2fdbbb;
    padding: 0 10px 10px 0;
  }

  .vulnerability-table {
    border: 1px solid white;

    th,
    td {
      border: 1px solid #506e7b;
      text-align: center;
      color: white;
    }

    th {
      height: 70px;
      background-color: rgba(22, 176, 227, 0.2);
    }
    td:nth-child(1) {
      height: 50px;
      background-color: rgba(22, 176, 227, 0.2);
    }

    // 让表格除了表头，其他每一行的第二列内容颜色是红色
    td:nth-child(2) {
      color: #ff0000;
    }
    td:nth-child(3) {
      color: #d37474;
    }

    td:nth-child(4) {
      color: #ffa500;
    }
    td:nth-child(5) {
      color: greenyellow;
    }
  }
}

.bottom-box {
  height: 260px;
  display: flex;
  justify-content: space-between;
}

.abs-bg {
  background-color: rgba(22, 176, 227, 0.2);
}

.abs-br-box {
  padding: 10px;
  background-color: rgba(22, 176, 227, 0.1);
  position: relative;
  &::before {
    content: "";
    display: block;
    width: 5px;
    height: calc(100% + 10px);
    position: absolute;
    top: -5px;
    left: -5px;
    border: 1px solid #506e7b;
    border-right: none;
  }
  &::after {
    content: "";
    display: block;
    width: 5px;
    height: calc(100% + 10px);
    position: absolute;
    top: -5px;
    right: -5px;
    border: 1px solid #506e7b;
    border-left: none;
  }
}
</style>
